<template>
  <div class="container">
    <div class="main">
      <!-- 整个注册盒子 -->
      <div class="loginbox">
        <!-- 左侧的注册盒子 -->
        <div class="loginbox-in">
          <el-form :rules= "rules" ref="loginform" :model="loginform" class="loginContainer" @keyup.enter.native= "login">
            <div class="u-p">
              <div class="userbox">
                <el-form-item prop="UserName">
                  <span class="iconfont" style="float:left">&#xe64a;</span>
                  <el-input type="text" auto-complete="false" v-model= "loginform.UserName" placeholder="请输入用户名" style="float:right; width:170px"></el-input>
                </el-form-item>
              </div>
              <div class="pwdbox">
                <el-form-item prop="PassWord">
                  <span class="iconfont" style="float:left">&#xe637;</span>
                  <el-input type="password" auto-complete="false" v-model= "loginform.PassWord" placeholder="请输入密码" style="float:right; width:170px"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-select class="select" v-model= "loginform.value" size="mini" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form>
          <button type="primary" id="Register" class="register_btn" @click= "register">注册</button>
          <el-button type="primary" class="login_btn" @click= "login">登录</el-button>
        </div>
        <!-- 右侧的注册盒子 -->
        <div class="background">
          <div class="title">欢迎登录稽查系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import headTop from './headTop'
// import headTop2 from './headTop2'
import cookies from 'js-cookie'
import axios from 'axios'
export default {
  data(){
    return{
      options: [{
        value: 1,
        label: '车主用户'
      }, {
        value: 2,
        label: '稽查员'
      }, {
        value: 0,
        label: '稽查管理员'
      }],
      value: 1,
      loginform:{
        UserName:'',
        PassWord:'',
        value:''
      },
      rules:{
        UserName:[{required:true,message:'请输入用户名',trigger:'blur'}],
        PassWord:[{required:true,message:'请输入密码',trigger:'blur'}]
      }
    }
  },
  methods:{
    async login() {
      console.log("fuckyou")
      axios.post('/login',this.loginform).then((res)=>{
        console.log(res)
        if(res.data.data.Identity=='0'){//稽查管理员待写
          cookies.set('id',this.loginform.UserName)
          cookies.set('role','0')
          this.$router.push('/Manage3')
        }else if(res.data.data.Identity=='1'){//车主
          cookies.set('id',this.loginform.UserName)
          cookies.set('role','1')
          this.$router.push('/Manage2')
        }else if(res.data.data.Identity=='2'){//稽查员
          this.$router.push('/Manage')
          console.log(res)
          console.log(this.loginform.UserName)
          cookies.set('id',this.loginform.UserName)
          cookies.set('role','2')
        }
        else if(res.data.status===0){
          this.$router.push()
        }
      })
    },
    register(){
      this.$router.push('/Register');
    }
  }
}
</script>


<style scoped>
.u-p >>> .el-input__inner{
  outline-style: none ;
  border: 0;
  border-bottom:1px solid #ffffff;
  background-color:transparent;
  height:20px;
  font-family:sans-serif;
  font-size:15px;
  color:#9998a3;
  font-weight:bold;
}
.u-p >>>.el-input__inner:focus{
  border-bottom:2px solid #231e55;
  background-color:transparent;
  transition: all 0.2s ease-in;
  font-family:sans-serif;
  font-size:15px;
  color:#231e55;
  font-weight:bold;
}
.u-p >>>.el-input__inner:hover{
  border-bottom:2px solid #35338d;
  background-color:transparent;
  transition: all 0.2s ease-in;
  font-family:sans-serif;
  font-size:15px;
  color:#232866;
  font-weight:bold;

}
.u-p >>>.el-input__inner:-webkit-autofill {
  /* 修改默认背景框的颜色 */
  box-shadow: 0 0 0px 1000px  #332d85 inset !important;
  /* 修改默认字体的颜色 */
  -webkit-text-fill-color: #40428a;
}

.u-p >>>.el-input__inner:-webkit-autofill::first-line {
  /* 修改默认字体的大小 */
  font-size: 15px;
  /* 修改默认字体的样式 */
  font-weight:bold;
}
.u-p >>>.el-form-item__error{
  margin-left: 50px;
}
.loginbox{
  display:flex;
  position:absolute;
  width:800px;
  height:400px;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow: 0 12px 16px 0  rgba(65, 53, 168, 0.24), 0 17px 50px 0 #03020c;
}
.container{
  width: 100%;
  height: 100%;
  background-color: #324057;
}
.background{
  width:570px;
  background-image:url('../assets/bg.jpg');
  background-size:cover;
  font-family:sans-serif;
}
.title{
  width:570px;
  text-align: center;
  margin-top:320px;
  font-weight:bold;
  font-size:20px;
  color:#20217a;

}
.title:hover{
  font-size:21px;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.loginbox-in{
  background-color:#d6d6db;
  width:240px;
}
@font-face {
  font-family: "iconfont";
  src: url('./font/iconfont.eot');
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height:22px;
  color:#180a3d;
  margin-right:10px;
}
.icon-key:before {
  content: "\e775";
}

.icon-account:before {
  content: "\e817";
}
.userbox{
  margin-top:100px ;
  height:50px;
  width:230px;
  display: flex;
  margin-left:20px;
}
.pwdbox{
  height:50px;
  width:225px;
  display: flex;
  margin-left:20px;
}
.select{
  margin-top: 20px;
  margin-bottom:20px;
  margin-left: 25px;
}
.login_btn{
  background-color: #3d3183; /* Green */
  border: none;
  color: #FAFAFA;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  border-radius: 20px;
  outline:none;
  float: right;
  margin-right:25px;
}
.login_btn:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  cursor: pointer;
  background-color: #29338f;
  transition: all 0.2s ease-in;
}
.register_btn{
  background-color: transparent; /* Green */
  float: left;
  border: none;
  text-decoration: none;
  font-size: 12px;
  /* border-radius: 20px;   */
  color:#23247a;
  font-size:12px;
  text-decoration:underline;
  display: flex;
  margin-left:25px;
  margin-top: 5px;
  outline:none;

}
.register_btn:hover{
  font-weight:bold;
  cursor: pointer;
}
</style>
